<template>
	<div class="page">
		<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent v-if="dialog">
			<!-- 搜索框-->
			<!-- <el-form-item prop="userName">
        <el-input
          size="small"
          v-model="searchForm.userName"
          placeholder="用户名"
          clearable
        ></el-input>
      </el-form-item> -->
			<el-form-item prop="realName">
				<el-input size="small" v-model="searchForm.realName" placeholder="姓名" clearable></el-input>
			</el-form-item>
			<el-form-item prop="phone">
				<el-input size="small" v-model="searchForm.phone" placeholder="手机号" clearable></el-input>
			</el-form-item>
			<el-form-item prop="idCard">
				<el-input size="small" v-model="searchForm.idCard" placeholder="身份证号" clearable></el-input>
			</el-form-item>
			<!-- <el-form-item prop="gradeRatings">
        <el-select·
          v-model="searchForm.gradeRatings"
          placeholder="请选择等级评级"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in $dictUtils.getDictList('grade_ratings')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="enterpriseInformation.id">
        <GridSelect
          title="选择签订合同企业"
          placeholder="请选择签订合同企业"
          labelName="companyName"
          labelValue="id"
          :value="searchForm.enterpriseInformation.id"
          :limit="1"
          size="small"
          @getValue="
            (value) => {
              searchForm.enterpriseInformation.id = value;
            }
          "
          :columns="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'companyName',
              label: '企业名称',
            },
          ]"
          :searchs="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'companyName',
              label: '企业名称',
            },
          ]"
          dataListUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/list"
          entityBeanName="enterpriseInformation"
          queryEntityUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/queryById"
        >
        </GridSelect>
      </el-form-item>
      <el-form-item prop="rongyunuserid">
        <el-input
          size="small"
          v-model="searchForm.rongyunuserid"
          placeholder="融云用户id"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="department.id">
        <GridSelect
          title="选择部门"
          placeholder="请选择部门"
          labelName="name"
          labelValue="id"
          :value="searchForm.department.id"
          :limit="1"
          size="small"
          @getValue="
            (value) => {
              searchForm.department.id = value;
            }
          "
          :columns="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'name',
              label: '名称',
            },
          ]"
          :searchs="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'name',
              label: '名称',
            },
          ]"
          dataListUrl="/dlyrl/hr/orporateinstitutions/orporateInstitutions/list"
          entityBeanName="orporateInstitutions"
          queryEntityUrl="/dlyrl/hr/orporateinstitutions/orporateInstitutions/queryById"
        >
        </GridSelect>
      </el-form-item>
      <el-form-item prop="branchdepart.id">
        <GridSelect
          title="选择分部"
          placeholder="请选择分部"
          labelName="name"
          labelValue="id"
          :value="searchForm.branchdepart.id"
          :limit="1"
          size="small"
          @getValue="
            (value) => {
              searchForm.branchdepart.id = value;
            }
          "
          :columns="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'name',
              label: '名称',
            },
          ]"
          :searchs="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'name',
              label: '名称',
            },
          ]"
          dataListUrl="/dlyrl/hr/orporateinstitutions/orporateInstitutions/list"
          entityBeanName="orporateInstitutions"
          queryEntityUrl="/dlyrl/hr/orporateinstitutions/orporateInstitutions/queryById"
        >
        </GridSelect>
      </el-form-item>
      <el-form-item prop="workCondition">
        <el-select
          v-model="searchForm.workCondition"
          placeholder="请选择工作状态"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in $dictUtils.getDictList('work_status')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
			<el-form-item prop="area">
				<CityPicker style="width: 100%" size="small" placeholder="选择所在地（省、市）" :value="searchForm.area"
					:clearable="true" :accordion="true" @getValue="
            (value) => {
              searchForm.area = value;
            }
          " />
			</el-form-item>
			<el-form-item style="float: right">
				<el-button type="primary" @click="refreshList()" size="small">查询</el-button>
				<el-button @click="resetSearch()" size="small">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 导入导出-->
		<el-dialog title="导入Excel" :visible.sync="isImportCollapse">
			<el-form size="small" :inline="true" v-show="isImportCollapse" ref="importForm">
				<el-form-item>
					<el-button type="default" @click="downloadTpl()" size="small">下载模板</el-button>
				</el-form-item>
				<el-form-item prop="loginName">
					<el-upload class="upload-demo"
						:action="`${this.$http.BASE_URL}/dlyrl/hr/userinformation/userInformation/import`"
						:on-success="uploadSuccess" :show-file-list="true">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">
							只允许导入“xls”或“xlsx”格式文件！
						</div>
					</el-upload>
				</el-form-item>
			</el-form>
		</el-dialog>
		<div class="bg-white top">
			<el-row>
				<el-button v-if="hasPermission('dlyrl:hr:userinformation:userInformation:add')" type="primary"
					size="small" icon="el-icon-plus" @click="add()">新建</el-button>
				<el-button v-if="hasPermission('dlyrl:hr:userinformation:userInformation:edit')" type="warning"
					size="small" icon="el-icon-edit-outline" @click="edit()" :disabled="dataListSelections.length != 1"
					plain>修改</el-button>
				<el-button v-if="hasPermission('dlyrl:hr:userinformation:userInformation:del')" type="danger"
					size="small" icon="el-icon-delete" @click="del()" :disabled="dataListSelections.length <= 0" plain>
					删除
				</el-button>
				<el-button type="success" plain size="small" @click="generateQRcode()">生成二维码</el-button>
				<el-button type="text" style="float: right; font-size: 12px" @click="setDialog">{{ dialog ? "收 起" : "展 开"
          }}<i :class="dialog ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i></el-button>
				<el-button-group class="pull-right">
					<el-button v-if="
              hasPermission('dlyrl:hr:userinformation:userInformation:import')
            " type="default" size="small" icon="el-icon-upload2" title="导入"
						@click="isImportCollapse = !isImportCollapse"></el-button>
					<el-button v-if="
              hasPermission('dlyrl:hr:userinformation:userInformation:export')
            " type="default" size="small" icon="el-icon-download" title="导出" @click="exportExcel()"></el-button>
					<el-button type="default" size="small" icon="el-icon-refresh" @click="refreshList">
					</el-button>
				</el-button-group>
			</el-row>
			<el-table :cell-style="cellStyle" style="border: 1px solid #d6cfe2" :header-cell-class-name="cellHeadStyle"
				:row-class-name="tableRowClassName" :data="dataList" size="small" height="calc(100% - 80px)"
				@selection-change="selectionChangeHandle" @sort-change="sortChangeHandle" v-loading="loading"
				class="table">
				<el-table-column type="selection" header-align="center" align="center" width="50">
				</el-table-column>
				<!-- <el-table-column
          prop="userName"
          show-overflow-tooltip 
          label="用户名"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              v-if="
                hasPermission('dlyrl:hr:userinformation:userInformation:edit')
              "
              @click="edit(scope.row.id)"
              >{{ scope.row.userName }}</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              v-else-if="
                hasPermission('dlyrl:hr:userinformation:userInformation:view')
              "
              @click="view(scope.row.id)"
              >{{ scope.row.userName }}</el-link
            >
            <span v-else>{{ scope.row.userName }}</span>
          </template>
        </el-table-column> -->
				<!-- <el-table-column
        prop="headPortrait"
        show-overflow-tooltip 
        label="头像">
        <template slot-scope="scope" v-if="scope.row.headPortrait">
            <a :href="item" target="_blank" :key="index" v-for="(item, index) in scope.row.headPortrait.split('|')">
                {{decodeURIComponent(item.substring(item.lastIndexOf("/")+1))}}
            </a>
        </template>
      </el-table-column> -->
				<el-table-column prop="realName" show-overflow-tooltip label="姓名" align="center">
				</el-table-column>
				<el-table-column prop="phone" show-overflow-tooltip label="手机号">
				</el-table-column>
				<el-table-column prop="idCard" label="身份证号" width="110" show-overflow-tooltip>
					<template
						slot-scope="scope">{{scope.row.idCard? scope.row.idCard.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2"):""}}</template>
				</el-table-column>
				<el-table-column prop="attstatus" show-overflow-tooltip label="认证状态">
				</el-table-column>
				<el-table-column prop="sex" align="center" show-overflow-tooltip label="性别">
				</el-table-column>
				<el-table-column prop="age" show-overflow-tooltip align="center" label="年龄">
				</el-table-column>
				<el-table-column prop="age" show-overflow-tooltip align="center" label="年龄">
				</el-table-column>
				<!-- <el-table-column
          prop="loginRoot"
          show-overflow-tooltip 
          label="注册来源"
        >
          (0鼎力相助，1灵活用工)
          <template slot-scope="scope">
            {{
              $dictUtils.getDictLabel("login_root", scope.row.loginRoot, "-")
            }}
          </template>
        </el-table-column> -->
				<el-table-column prop="area" show-overflow-tooltip label="所在地">
				</el-table-column>
				<!-- <el-table-column
          header-align="center"
          align="center"
          fixed="right"
          :key="Math.random()"
          width="200"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="
                hasPermission('dlyrl:hr:userinformation:userInformation:view')
              "
              type="text"
              icon="el-icon-view"
              size="mini"
              @click="view(scope.row.id)"
              >查看</el-button
            >
            <el-button
              v-if="
                hasPermission('dlyrl:hr:userinformation:userInformation:edit')
              "
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope.row.id)"
              >修改</el-button
            >
            <el-button
              v-if="
                hasPermission('dlyrl:hr:userinformation:userInformation:del')
              "
              type="text"
              icon="el-icon-delete"
              size="mini"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
			<el-dialog title="入职登记二维码" :visible.sync="QRcodesDialog" width="20%">
				<img style="width:100%" :src=QRcodes>
			</el-dialog>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<UserInformationForm ref="userInformationForm" @refreshDataList="refreshList"></UserInformationForm>
	</div>
</template>

<script>
	import tableStyles from "../../../../utils/mixins.js";
	import UserInformationForm from "./UserInformationForm";
	import GridSelect from "@/components/gridSelect";
	import CityPicker from "@/components/cityPicker";
	export default {
		mixins: [tableStyles],
		data() {
			return {
				// 生成二维码
				QRcodes: "",
				QRcodesDialog: false,
				searchForm: {
					userName: "",
					phone: "",
					realName: "",
					idCard: "",
					gradeRatings: "",
					enterpriseInformation: {
						id: "",
					},
					rongyunuserid: "",
					department: {
						id: "",
					},
					branchdepart: {
						id: "",
					},
					workCondition: "",
					area: "",
				},
				dataList: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				orderBy: "",
				dataListSelections: [],
				isImportCollapse: false,
				loading: false,
				dialog: false,
			};
		},
		components: {
			GridSelect,
			CityPicker,
			UserInformationForm,
		},
		activated() {
			this.refreshList();
		},
		methods: {
			//生成二维码
			generateQRcode() {
				this.$http({
					url: "/dlyrl/hr/qr/entryCreateQRCode",
					method: "post",
					params: {
						office: this.$store.state.user.companyId,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.QRcodes = data.qr;
						this.QRcodesDialog = true;
					}
				});
			},
			setDialog() {
				this.dialog = !this.dialog;
			},
			//跳转
			enterpriseInfoRouter(url) {
				this.$router.push(url);
			},
			// 获取数据列表
			refreshList() {
				this.loading = true;
				this.$http({
					url: "/dlyrl/hr/userinformation/userInformation/list",
					method: "get",
					params: {
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						orderBy: this.orderBy,
						registerOffice: this.$store.state.user.companyId,
						loginRoot: "入职登记",
						...this.searchForm,
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.page.list;
						this.total = data.page.count;
						this.loading = false;
					}
				});
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val;
				this.pageNo = 1;
				this.refreshList();
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val;
				this.refreshList();
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val;
			},

			// 排序
			sortChangeHandle(obj) {
				if (obj.order === "ascending") {
					this.orderBy = obj.prop + " asc";
				} else if (obj.order === "descending") {
					this.orderBy = obj.prop + " desc";
				} else {
					this.orderBy = "";
				}
				this.refreshList();
			},
			// 新增
			add() {
				this.$refs.userInformationForm.init("add", "");
			},
			// 修改
			edit(id) {
				id =
					id ||
					this.dataListSelections.map((item) => {
						return item.id;
					})[0];
				this.$refs.userInformationForm.init("edit", id);
			},
			// 查看
			view(id) {
				this.$refs.userInformationForm.init("view", id);
			},
			// 删除
			del(id) {
				let ids =
					id ||
					this.dataListSelections
					.map((item) => {
						return item.id;
					})
					.join(",");
				this.$confirm(`确定删除所选项吗?`, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.loading = true;
					this.$http({
						url: "/dlyrl/hr/userinformation/userInformation/delete",
						method: "delete",
						params: {
							ids: ids
						},
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg);
							this.refreshList();
						}
						this.loading = false;
					});
				});
			},
			// 导入成功
			uploadSuccess(res, file) {
				if (res.success) {
					this.$message.success({
						dangerouslyUseHTMLString: true,
						message: res.msg,
					});
				} else {
					this.$message.error(res.msg);
				}
			},
			// 下载模板
			downloadTpl() {
				this.$utils.download(
					"/dlyrl/hr/userinformation/userInformation/import/template"
				);
			},
			exportExcel() {
				let params = {
					...this.searchForm,
				};
				this.$utils.download(
					"/dlyrl/hr/userinformation/userInformation/export",
					params
				);
			},
			resetSearch() {
				this.$refs.searchForm.resetFields();
				this.refreshList();
			},
		},
	};
</script>
<style scoped>
	ul {
		margin: 0;
	}
</style>
